<script setup lang="ts">
import { ref } from "vue";
import CSSBox from "../components/CSSBox.vue";

const TEXT = ref("故障");

</script>

<template>
  <CSSBox :TYPE="'CSS'">
    <div class="fault-container w-full h-full flex justify-center items-center">
      <p v-for="(,index) in 2" :text="TEXT" :style="{'animation-delay':`${index}s`}" class="fault-text">{{ TEXT }}</p>
    </div>
  </CSSBox>
</template>

<style lang="less" scoped>
.fault-container {
  position: relative;
  .fault-text {
    font-size: 5rem;
    font-weight: bold;
    letter-spacing: 0.5rem;
    user-select: none;
    position: absolute;
    animation: shake 2s steps(1, end) infinite;
    opacity: 0;
    &::after,
    &::before {
      content: "" attr(text) "";
      position: absolute;
      left: 0;
      top: 0;
      mix-blend-mode: screen;
    }
    &::after {
      color: red;
      transform: translateX(2.5%);
    }
    &::before {
      color: blue;
      transform: translateX(-2.5%);
    }
  }
}
@keyframes shake {
  2% {
    transform: translate(0.5rem, -1.5rem) rotate(-0.5deg);
    clip-path: polygon(55% 67%, 133% 67%, 133% 141%, 55% 141%);
  }

  4% {
    transform: translate(0.5rem, 1.5rem) rotate(1.5deg);
    clip-path: polygon(90% 5%, 140% 5%, 140% 35%, 90% 35%);
  }

  6% {
    transform: translate(1.5rem, 1.5rem) rotate(1.5deg);
    clip-path: polygon(67% 37%, 120% 37%, 120% 132%, 67% 132%);
  }

  8% {
    transform: translate(2.5rem, 1.5rem) rotate(0.5deg);
    clip-path: polygon(23% 21%, 75% 21%, 75% 91%, 23% 91%);
  }

  10% {
    transform: translate(0.5rem, 2.5rem) rotate(0.5deg);
    clip-path: polygon(32% 89%, 118% 89%, 118% 102%, 32% 102%);
  }

  12% {
    transform: translate(1.5rem, 1.5rem) rotate(0.5deg);
    clip-path: polygon(10% 30%, 45% 30%, 45% 67%, 10% 67%);
  }

  14% {
    transform: translate(0.5rem, 0.5rem) rotate(0.5deg);
    clip-path: polygon(89% 84%, 90% 84%, 90% 162%, 89% 162%);
  }

  16% {
    transform: translate(-1.5rem, -0.5rem) rotate(1.5deg);
    clip-path: polygon(62% 20%, 124% 20%, 124% 101%, 62% 101%);
  }

  18% {
    transform: translate(0.5rem, 0.5rem) rotate(1.5deg);
    clip-path: polygon(37% 89%, 108% 89%, 108% 145%, 37% 145%);
  }

  20% {
    transform: translate(2.5rem, 2.5rem) rotate(1.5deg);
    clip-path: polygon(83% 56%, 101% 56%, 101% 80%, 83% 80%);
  }

  22% {
    transform: translate(0.5rem, -1.5rem) rotate(1.5deg);
    clip-path: polygon(39% 63%, 90% 63%, 90% 140%, 39% 140%);
  }

  24% {
    transform: translate(-1.5rem, 1.5rem) rotate(-0.5deg);
    clip-path: polygon(94% 50%, 129% 50%, 129% 70%, 94% 70%);
  }

  26% {
    transform: translate(1.5rem, 0.5rem) rotate(1.5deg);
    clip-path: polygon(19% 29%, 54% 29%, 54% 105%, 19% 105%);
  }

  28% {
    transform: translate(-0.5rem, -0.5rem) rotate(-0.5deg);
    clip-path: polygon(40% 15%, 125% 15%, 125% 101%, 40% 101%);
  }

  30% {
    transform: translate(1.5rem, -0.5rem) rotate(-0.5deg);
    clip-path: polygon(98% 45%, 188% 45%, 188% 70%, 98% 70%);
  }

  32% {
    transform: translate(2.5rem, -1.5rem) rotate(1.5deg);
    clip-path: polygon(50% 16%, 79% 16%, 79% 66%, 50% 66%);
  }

  34% {
    transform: translate(2.5rem, 2.5rem) rotate(-0.5deg);
    clip-path: polygon(60% 18%, 144% 18%, 144% 32%, 60% 32%);
  }

  36% {
    transform: translate(0.5rem, -1.5rem) rotate(0.5deg);
    clip-path: polygon(27% 42%, 49% 42%, 49% 67%, 27% 67%);
  }

  38% {
    transform: translate(2.5rem, -0.5rem) rotate(-0.5deg);
    clip-path: polygon(58% 22%, 86% 22%, 86% 62%, 58% 62%);
  }

  40% {
    transform: translate(-0.5rem, 2.5rem) rotate(0.5deg);
    clip-path: polygon(1% 56%, 25% 56%, 25% 66%, 1% 66%);
  }

  42% {
    transform: translate(-1.5rem, 2.5rem) rotate(0.5deg);
    clip-path: polygon(28% 39%, 81% 39%, 81% 55%, 28% 55%);
  }

  44% {
    transform: translate(-1.5rem, 1.5rem) rotate(0.5deg);
    clip-path: polygon(85% 71%, 161% 71%, 161% 106%, 85% 106%);
  }

  46% {
    transform: translate(1.5rem, -0.5rem) rotate(-0.5deg);
    clip-path: polygon(80% 34%, 157% 34%, 157% 58%, 80% 58%);
  }

  48% {
    transform: translate(2.5rem, -0.5rem) rotate(0.5deg);
    clip-path: polygon(18% 98%, 23% 98%, 23% 167%, 18% 167%);
  }

  50% {
    transform: translate(-1.5rem, 1.5rem) rotate(0.5deg);
    clip-path: polygon(25% 52%, 118% 52%, 118% 89%, 25% 89%);
  }

  52% {
    transform: translate(-0.5rem, 1.5rem) rotate(0.5deg);
    clip-path: polygon(32% 4%, 112% 4%, 112% 54%, 32% 54%);
  }

  54% {
    transform: translate(-1.5rem, 1.5rem) rotate(0.5deg);
    clip-path: polygon(85% 87%, 144% 87%, 144% 121%, 85% 121%);
  }

  56% {
    transform: translate(0.5rem, 2.5rem) rotate(1.5deg);
    clip-path: polygon(26% 44%, 46% 44%, 46% 141%, 26% 141%);
  }

  58% {
    transform: translate(2.5rem, 2.5rem) rotate(0.5deg);
    clip-path: polygon(10% 37%, 35% 37%, 35% 109%, 10% 109%);
  }

  60% {
    transform: translate(2.5rem, -1.5rem) rotate(1.5deg);
    clip-path: polygon(43% 71%, 73% 71%, 73% 166%, 43% 166%);
  }

  62% {
    transform: translate(-1.5rem, 0.5rem) rotate(1.5deg);
    clip-path: polygon(70% 25%, 120% 25%, 120% 81%, 70% 81%);
  }

  64% {
    transform: translate(-1.5rem, 1.5rem) rotate(1.5deg);
    clip-path: polygon(88% 56%, 133% 56%, 133% 119%, 88% 119%);
  }

  66% {
    transform: translate(0.5rem, 2.5rem) rotate(1.5deg);
    clip-path: polygon(24% 69%, 42% 69%, 42% 104%, 24% 104%);
  }

  68% {
    transform: translate(2.5rem, -1.5rem) rotate(1.5deg);
    clip-path: polygon(7% 39%, 59% 39%, 59% 94%, 7% 94%);
  }

  70% {
    transform: translate(2.5rem, 2.5rem) rotate(0.5deg);
    clip-path: polygon(68% 22%, 78% 22%, 78% 104%, 68% 104%);
  }

  72% {
    transform: translate(-0.5rem, -1.5rem) rotate(1.5deg);
    clip-path: polygon(16% 18%, 64% 18%, 64% 78%, 16% 78%);
  }

  74% {
    transform: translate(-1.5rem, 2.5rem) rotate(1.5deg);
    clip-path: polygon(40% 9%, 42% 9%, 42% 63%, 40% 63%);
  }

  76% {
    transform: translate(-1.5rem, 2.5rem) rotate(1.5deg);
    clip-path: polygon(92% 94%, 112% 94%, 112% 188%, 92% 188%);
  }

  78% {
    transform: translate(-1.5rem, 2.5rem) rotate(0.5deg);
    clip-path: polygon(45% 22%, 131% 22%, 131% 98%, 45% 98%);
  }

  80% {
    transform: translate(-1.5rem, 0.5rem) rotate(-0.5deg);
    clip-path: polygon(18% 8%, 63% 8%, 63% 89%, 18% 89%);
  }

  82% {
    transform: translate(-1.5rem, 0.5rem) rotate(-0.5deg);
    clip-path: polygon(63% 67%, 96% 67%, 96% 79%, 63% 79%);
  }

  84% {
    transform: translate(-0.5rem, 0.5rem) rotate(1.5deg);
    clip-path: polygon(19% 13%, 82% 13%, 82% 36%, 19% 36%);
  }

  86% {
    transform: translate(2.5rem, 1.5rem) rotate(0.5deg);
    clip-path: polygon(89% 34%, 172% 34%, 172% 86%, 89% 86%);
  }

  88% {
    transform: translate(-1.5rem, 0.5rem) rotate(1.5deg);
    clip-path: polygon(14% 27%, 103% 27%, 103% 71%, 14% 71%);
  }

  90% {
    transform: translate(-1.5rem, -0.5rem) rotate(-0.5deg);
    clip-path: polygon(3% 96%, 32% 96%, 32% 193%, 3% 193%);
  }

  92% {
    transform: translate(-1.5rem, -1.5rem) rotate(1.5deg);
    clip-path: polygon(1% 48%, 22% 48%, 22% 147%, 1% 147%);
  }

  94% {
    transform: translate(0.5rem, 0.5rem) rotate(-0.5deg);
    clip-path: polygon(67% 86%, 139% 86%, 139% 111%, 67% 111%);
  }

  96% {
    transform: translate(2.5rem, -0.5rem) rotate(-0.5deg);
    clip-path: polygon(2% 29%, 100% 29%, 100% 107%, 2% 107%);
  }

  98% {
    transform: translate(-1.5rem, -1.5rem) rotate(-0.5deg);
    clip-path: polygon(73% 14%, 82% 14%, 82% 104%, 73% 104%);
  }

  0%,
  100% {
    transform: translate(0, 0) rotate(0);
    clip-path: polygon(85% 19%, 164% 19%, 164% 79%, 85% 79%);
    opacity: 1;
  }
}
</style>
